<template lang="html">
<div class="page">
  <cube-scroll ref="scroll" :options="{scrollbar:{fade:true}}">

    <div class="flex bg-white line-top p-md">
      <avatar :src="user.Avatar" class="mr"></avatar>
      <div class="f-body">
        <div class="fs-sm tc-grey">{{user.Name}}</div>
        <div class="desc flex jc-sb">
          <p class="left">部门：{{user.DeptName}}</p>
          <!--<span>{{ obj.UpdateTime }}</span>-->
        </div>
      </div>
    </div>
    <tit has-bg class="mt-md">调度信息</tit>
    <div class="info-block">
      <cube-input v-model="form.Title" placeholder="请输入调度名称"></cube-input>
      <cube-select v-model="form.TypeId" placeholder="请选择类型" class="mt-lg" :options="types"></cube-select>
      <cube-select v-model="form.FlowId" placeholder="请选择流程" class="mt-lg" :options="flows"></cube-select>
      <cube-textarea v-model="form.Description" placeholder="请输入详细信息" class="mt-lg" :maxlength="300" clearable></cube-textarea>
      
      <h4 class="title mt-lg">上传图片</h4>
      <cube-upload action="http://localhost:33167/app/Handler/CommonHandler.ashx?action=Upload"
                   :simultaneous-uploads="1"
                   @file-success="fileSuccess" />
      <!--<h4 class="title mt">相关图片</h4>
      <el-row :gutter="10" >
        <el-col :span="8" v-for="(item,index) in List" :key="index+Math.random()" v-if="index<3">
          <g-item :thum-src="item.CoverImage" img-height="60" href="/"></g-item>
        </el-col>
      </el-row>
      <h4 class="title mt">相关视频</h4>
      <el-row :gutter="10" >
        <el-col :span="8" v-for="(item,index) in List" :key="index+Math.random()" v-if="index>4 && index<8">
          <g-item :thum-src="item.CoverImage" img-height="60" is-video href="/"></g-item>
        </el-col>
      </el-row>-->
    </div>
    <div class="btn-wrap">
      <btn type="primary" block size="lg" @click.native="submitForm">提交信息</btn>
    </div>
  </cube-scroll>

</div>
</template>

<script>
import compress from '@/common/image.js'
export default {

  data() {
    return {
      List: [],
      flows:[],
      types:[],
      user:{},
      form:{
        Title:'',
        TypeId:'',
        FlowId:'',
        Description:'',
      },
      pictures:[],
      action: {
        target: '//jsonplaceholder.typicode.com/photos/',
        prop: 'base64Value'
      }
    }
  },
  created () {
    //this.getListData();
    this.getUser();
    this.getTypeList();
    this.getFlowList();
  },
  methods : {
    getUser() {
      this.$http.get("app/Handler/UserHandler.ashx?action=Get")
      .then(data => {
        console.log(data);
        if(data.code == 0){
          this.user = data.data;
        }
      })	 
    },
    getTypeList() {
      this.$http.get("app/Handler/DispatchTypeHandler.ashx?action=GetAllList")
      .then(data => {
        console.log(data);
        if(data.code == 0){
          this.types = data.data;
        }
      })	 
    },
    getFlowList() {
      this.$http.get("app/Handler/WorkFlowHandler.ashx?action=GetAllList")
      .then(data => {
        console.log(data);
        if(data.code == 0){
          this.flows = data.data;
        }
      })	 
    },
    fileSuccess(file) {
      var data = file.response;
      console.log(data);
      if(data.code == 0){
        this.pictures.push(data.url);
      }
    },
    submitForm(){
      let params = this.form;
      if(params.Title==""){
        this.$createToast({
          txt:  "调度名称不能为空！",
          type: 'warn'
        }).show();
        return;
      }
      if(params.TypeId==""){
        this.$createToast({
          txt:  "请选择调度类型！",
          type: 'warn'
        }).show();
        return;
      }
      if(params.FlowId==""){
        this.$createToast({
          txt:  "请选择调度流程！",
          type: 'warn'
        }).show();
        return;
      }
      params.pictures = this.pictures.join(",");
      if(this.pictures.length > 0){
        params.CoverImage = this.pictures[0];
      }
      console.log(params);
      const toast = this.$createToast({
        txt: '提交中...',
        mask: true
      });
      toast.show()
      this.$http.post('app/Handler/DispatchHandler.ashx?action=Save', params)
        .then(data => {
          console.log(data);  
          if(data.code == 0) {
            toast.hide();
            this.$createToast({
              txt: '数据保存成功！',
              type: 'correct'
            }).show();
            this.$router.push('/online');
          }else{
            this.$createToast({
              txt:  data.msg,
              type: 'warn'
            }).show();
          }
        })
    },
    getListData() {
      this.id = this.$route.query.id
      console.log(this.$route.query.id2);
      this.axios.get('https://jason588.github.io/data.json').then((res) => {
        this.List = res.data.List
        this.obj = res.data.List[this.id]
      })
    },


  },
}
</script>

<style lang="stylus">
@import "assets/stylus/base"

</style>
